.moments-container{
  // min-height: 170vh;
  position: relative;

  .header{
    top: -4rpx;
    background: #fff;
  }
  .search-line{
    @include flex;
    @include a-center;

    height: 90rpx;

    .sub-item{
      @include sub-item;
      padding: 0 15rpx;
    }
  }
  .user-center-icon{
    padding: 0 15rpx 0 28rpx;
    .user-icon{
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      display: block;
    }
  }
  .shy-icon-control{
    display: flex;
    font-size: 26rpx;
    align-items: center;
    padding: 0 28rpx 0 15rpx;
    .shy-icon{
      width: 26rpx;
      height: 26rpx;
      margin-right: 12rpx;
      display: block;
    }
  }

  .resource-list{
    height: 400rpx;
    position: relative;
    .resource-item{
      @include flex(column, inline-flex);
      @include center;
      margin-right: 10rpx;
      .videoPos{
        position: relative;
        .videoPlay{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      }
    }
  }
  .pubilsh-button{
    @include transition;
    position: fixed;
    bottom: 150rpx;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    &.active{
      opacity: 1;
    }
  }
  
  .group-container{
    margin-top: 20rpx;
    transition: 200ms;
    background-color: #fff;
  }
  .bg{
    margin-bottom: 20rpx;
    background: #fff;
  }
  .banner-block{
    background-color: #fff;
    // margin-bottom: 20rpx;
    padding: 0 20rpx 20rpx 20rpx;
  }
  .channel-list{
    // @include flex;
    // @include a-center;
    background: #fff;
    box-sizing: border-box;
    // margin-bottom: 20rpx;
    padding: 32rpx 0 32rpx 0;
    position: relative;
    .channel-item{
      // @include sub-item;
      color: #000;
      font-size: 24rpx;
      font-weight: 500;
      width: 25%;
      line-height: 50rpx;
      text-align: center;
      position: relative;
      display: inline-block;
      .item-image{
        image{
          width: 50rpx;
          height: 50rpx;
        }
      }
      .item-text{
        @include text-ellipsis-line(1);
      }
    }

    &.border::after{
      content: '';
      left: -30rpx;
      right: -30rpx;
      bottom: 0;
      border-bottom: 1px solid #ededed;
      position: absolute;
      z-index: 999;
    }
  }
  .article-list{
    margin-top: 20rpx;
  }
  .filter-select-box{
    display: flex;
    padding: 20rpx;
    .filter-select-item{
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 20rpx;
      margin-top: -12rpx;
      background-color: #f5f5f5;
      color: #000;
      line-height: 20rpx;
      font-size: 24rpx;
      .close{
        margin-left: 20rpx;
        color: #999;
        font-size: 30rpx;
      }
    }
  }
  
  .group-wrap{
    display: flex;
    flex-wrap: wrap;
    padding: 16rpx 24rpx;
    .group-wrap-item{
      color: #000;
      font-size: 28rpx;
      border-radius: 2px;
      padding: 0 24rpx;
      line-height: 56rpx;
      display: inline-block;
      margin-bottom: 30rpx;
      background: #fff;
      // border-radius: 28rpx;
      border: 2rpx solid #000;
      margin-right: 20rpx;

      &.active{
        color: #fff;
        background: #000;
      }
    }
  }
  .group-list{
    padding: 16rpx 24rpx;
    // margin-bottom: 20rpx;
    .group-item,
    .tag-item{
      position: relative;
      color: #000;
      font-size: 26rpx;
      padding: 0 22rpx;
      line-height: 56rpx;
      display: inline-block;
      // border-radius: 28rpx;
      margin-right: 0rpx;

      .active{
        &::before{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          content: ' ';
          width: 30rpx;
          height: 4rpx;
          background-color: #000;
        }
        // color: #fff;
        font-weight: bold;
      }
    }
  }

  .article-item{
    padding: 24rpx;
    background: linear-gradient(to bottom, #fff,#fff 50%,#f5f5f5 50%, #f5f5f5);
    .user{
      @include flex;
      @include a-center;
      color: #000;
      font-size: 28rpx;
      padding: 30rpx 0;
  
      .avatar{
        width: 70rpx;
        height: 70rpx;
        border-radius: 35rpx;
        overflow: hidden;
        margin-right: 24rpx;
      }
    }
    .footer{
      @include flex;
      @include a-center;
      padding: 40rpx 0 26rpx;
      .icon{
        display: block;
      }
      .sub-item{
        @include sub-item;
      }
      .text{
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
  }

  // 新人上手
  .new-user-block{
    web-view{
      z-index: -1;
      margin-top: 120rpx;
      position: relative;
    }
  }

  // 进阶学习
  .advance-study-block{
    .article-item{
      .title{
        @include text-ellipsis-line(1);
        color: #000;
        font-size: 32rpx;
        font-weight: 500;
        padding-top: 18rpx;
      }
      .poster-image{
        width: 702rpx;
        height: 455rpx;
        background-size: 100%;
        background-position: top;
      }
      .sub-title{
        color: #666;
        font-size: 28rpx;
        line-height: 34rpx;
        padding: 30rpx 0;
      }
      .icon{
        display: block;
      }
      .icon-white{
        display: none;
      }


      &:nth-child(2n){
        background: linear-gradient(to bottom, #fff,#fff 50%,#000 50%, #000 100%);
        .footer{
          color: #fff;

          .icon{
            display: none;
          }
          .icon-white{
            display: block;
          }
        }
      }
    }
  }
  
  // 素材圈
  .material-block{
    .article-item{
      background: #fff;
      margin-bottom: 20rpx;
      // border-radius: 30rpx;

      .date{
        color: #999;
        font-size: 24rpx;
        line-height: 1;
        margin-top: 8rpx;
      }
    }
    .material-img{
      margin: 10rpx;
    }
    .link-content{
      @include flex;
      // @include a-center;
      padding: 20rpx;
      background: #F5F5F5;
      border-radius: 10rpx;
      position: relative;

      .link-image{
        width: 100rpx;
        height: 100rpx;

        image{
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
      .link-detail{
        @include sub-item;
        margin-left: 20rpx;
        font-size: 22rpx;

        .name{
          @include text-ellipsis-line(2);
          color: #000;
          line-height: 34rpx;
          height: 68rpx;
        }
        .price{
          color: #FF3939;
          display: inline-block;

          &.market-price{
            color: #999;
            text-decoration: line-through;
            margin-left: 20rpx;
          }
        }
      }
      .icon-more{
        right: 30rpx;
        bottom: 10rpx;
        position: absolute;
      }
    }
    .footer{
      @include flex;
      @include j-between;
      padding: 30rpx 0 10rpx;
    }
    .footer-item{
      @include flex;
      @include center;
      view{
        margin-left: 10rpx;
      }
    }
  }

  // 邀请海报
  .poster-block{
    padding-top: 16rpx;
    .article-item{
      .advice{
        color: #E21536;
        font-size: 28rpx;
        padding: 30rpx 0;
      }
      .text-desc{
        min-height: 20rpx;
      }
      .poster-image{
        width: 702rpx;
        height: 455rpx;
        background-size: 100%;
        background-position: top;
      }
    }
  }
}